import React from "react"

// key 的意义，当setState从新渲染是，key代表的唯一索引不会被重新渲染，只有发生v便话的部分才会重新渲染。
export default class Keydemo extends React.Component {

    constructor(props) {
        super();
        this.state = {
            userinfo:
                [
                    {
                        name: "dawang",
                        age:30,
                        sex:"男",
                        jobs:["333",":333"]
                    },
                    {
                        name: "dawang",
                        age:30,
                        sex:"男",
                        jobs:["333",":333"]
                    },
                    {
                        name: "dawang",
                        age:30,
                        sex:"男",
                        jobs:["333",":333"]
                    },
                ]

        }
    }


clickHandler = () =>{
    this.setState({
        userinfo:this.state.userinfo.concat([{
            name:"zhangba",
            age:90,
            sex:"美女",
            jobs:["333",":333"]
        }])
    })
}



    render() {
        return (
            <div>
                <ul>
                    {
                        this.state.userinfo.map((element, index) => {
                            return (
                                <li key={index}>
                                    <span>{element.name}</span>
                                    <span>{element.age}</span>
                                    <span>{element.sex}</span>
                                    <div>
                                        {
                                            element.jobs.map((childElement, childIndex) => {
                                                return <span key={childIndex}>{childElement}</span>
                                            })
                                        }
                                    </div>
                                </li>
                            )
                        })
                    }
                </ul>
                <button onClick={this.clickHandler.bind(this)}>添加</button>
            </div>
        )
    }
}